<!-- 日夜切换 -->
<script setup lang="ts">
import utils from '@/utils/utils'
import { onMounted } from 'vue'

let ifSun: boolean = true
let domWidth: string = ''
onMounted(() => {
    domWidth = utils.getStyle('.switch-moon-sun-warp', 'width')
})
const change_moon_sun = (): void => {
    ifSun = !ifSun
    if (ifSun) {
        utils.setStyle('.switch-moon-sun', 'left', '0px')//日月切换动画
        document.documentElement.removeAttribute('theme') //原生dom色彩改变
        document.documentElement.classList.remove('dark')//elementUi改变
        utils.setTheme('--el-color-primary', localStorage.getItem('--el-color-primary') || '#409eff')//改变主题渐变色
    }
    else {
        utils.setStyle('.switch-moon-sun', 'left', '-' + domWidth)
        document.documentElement.setAttribute('theme', 'dark')
        document.documentElement.classList.add('dark')
        utils.setTheme('--el-color-primary', localStorage.getItem('--el-color-primary') || '#409eff')
    }
}
</script>
<template>
    <div class="switch-moon-sun-warp" @click="change_moon_sun">
        <div class="switch-moon-sun">
            <img class="sun hover-up-img" src="@/assets/imgs/sun.png" alt="">
            <img class="moon hover-up-img" src="@/assets/imgs/moon.png" alt="">
        </div>
    </div>
</template>
<style scoped lang="scss">
.switch-moon-sun-warp {
    $length: 40px;
    width: $length;
    height: $length;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: .3s ease-in-out;

    &:hover {
        border: 1px dashed var(--c-shadow);
    }

    .switch-moon-sun {
        transition: all .3s ease-in-out;
        position: absolute;
        left: 0;
        width: $length*2;
        height: $length;
        background: var(--c-bg-body);

        img {
            width: $length;
            height: $length;
            transition: transform .5s;

            &:hover {
                transform: scale(1.2);
            }
        }
    }
}
</style>
